//定义全局请求
axios.defaults.baseURL = "http://kumanxuan1.f3322.net:8881/cms";
//axios.defaults.timeout = 2000;
axios.defaults.headers.post['Content-Type'] = 'application/X-WWW-FORM-URLENCODED';



// 1. 导航栏
var codingHead = {
	data: function() {
		return {

		}
	},
	template: `
		<div class = "coding-nov">
			<span>欢迎来到叩丁狼积分商城</span>
			<div class = "headNovRight">
				<ul>
					<li>
						<img src = './img/userImg.png' class = "userImg">
						用户名：游客
					</li>
					<li>我的积分： --</li>
					<li>获得积分</li>
					<li>叩丁狼官网</li>
					<li class = "nov-btn">登录</li>
				</ul>
			</div>
		</div>
	`
};

// 2. 切换，搜索组件
var codingTitle = {
	data: function() {
		return {

		}
	},
	mounted() {
		let btn = document.querySelectorAll('.ff a');
		for (let i = 0; i < btn.length; i++) {
			btn[i].addEventListener('click', function() {
				this.classList.add('active');
				document.querySelector('.active').classList.remove('active');
				this.classList.add('active');
			})
		}
	},
	template: `
		<div class = "coding-title">
			<div class = "coding-in bx tx">
				<div class = "title-img">
					<img src = './img/indexLogo.png' class = "">
				</div>
				<ul class = "tx ff">
					<li>
						<router-link :to = "{name:'Index'}" class = "active">首页</router-link>
					</li>
					<li>
						<router-link :to = "{name:'Goods'}">全部商品</router-link>
					</li>
					<li>
						<router-link :to = "{name:'Person'}">个人中心</router-link>
					</li>
					<li>
						<router-link :to = "{name:'Order'}">我的订单</router-link>
					</li>
					<li>
						<router-link :to = "{name:'Welfare'}">专属福利</router-link>
					</li>
				</ul>
				<div class = "search tx">
					<input type = "text" placeholder = "搜索全部商品直接回车">
					<router-link :to = "{name:'Goods'}">
						<div class = "btn">
							<img src = './img/search.png' class = "">
						</div>
					</router-link>
				</div>
			</div>
		</div>
	`
};

// 3.1 主页图片
var Banner = {
	data: function() {
		return {

		}
	},
	template: `
		<div class = "banner">
			<div class = "show-img">
				<img src = './img/banner.png' class = "">
			</div>
		</div>
	`
}

// 3.2 精品推荐--标题
var Jingpin = {
	data: function() {
		return {

		}
	},
	template: `
		<div class = "jingpin bx">
			<div class = "jingpin-title tx">
				<div class = "title-text">
					<img src = './img/jingpin.png' class = "">
					<h2>精品推荐</h2>
				</div>
				<div class = "title-more">
					<span>更多</span>
					<img src = './img/more.png' class = "">
				</div>
			</div>
		</div>
	`
}

// 3.3.1 单个商品组件
var Product = {
	data: function() {
		return {
			goods: [],
			url: "http://sc.wolfcode.cn",
			//1表示热销，0代表否
			isHotSale: 0,
			//1表示新品，0代表否
			isLatest: 0,
		}
	},
	template: `
		<ul class = "products bx">
			<li v-for="item in goods" :key="item.id" >
				<router-link :to = "{name:'productsId'}">
				<div class = "products-box">
					<img :src="url + item.coverImg" class = "img1">
					<h3>
						{{item.name}}
					</h3>
					<section>
						<span>{{item.coin}}</span>
						<img src = './img/products02.png' class = "">
					</section>
					<div class = "btn">立即兑换</div>
					<img src = './img/new.png' class = "img-p" >
					<img src = './img/hot.png' class = "img-p" >
				</div>
				</router-link>
			</li>
		</ul>
	`,
	mounted: function() {
		var that = this;
		axios.get(
			"/products/recommend"
		).then(function(res) {
			that.goods = res.data.data.data.records;
		});
	}
}

// 3.3 商品（）
var Products = {
	data: function() {
		return {

		}
	},
	components: {
		"product": Product
	},
	template: `
			<product></product>
		`
}

// 3.4 热门兑换--标题
var Hot = {
	data: function() {
		return {

		}
	},
	template: `
		<div class = "jingpin bx">
			<div class = "jingpin-title tx">
				<div class = "title-text">
					<img src = './img/hot.gif' class = "">
					<h2>热门兑换</h2>
				</div>
				<div class = "title-more">
					<span>更多</span>
					<img src = './img/more.png' class = "">
				</div>
			</div>
		</div>
	`
}

// 3.5 鸡腿兑换课程优惠券
var hotProducts = {
	data: function() {
		return {
			url: "http://sc.wolfcode.cn",
			goods: []
		}
	},
	template: `
			<ul class = "hot-products bx">
				<li v-for="item in goods" :key="item.id">
					<router-link :to = "{name:'productsId'}">
						<div class = "products-box">
							 <img :src="url + item.coverImg" class = "">
							<h3>
								{{item.name}}
							</h3>
							<section>
								<span>{{item.coin}}</span>
								<img src = './img/products02.png' class = "">
							</section>
							<div class = "btn">
								立即兑换
							</div>
							<img src = './img/new.png' class = "img-p">
							<img src = './img/hot.png' class = "img-p">
						</div>
					</router-link>
				</li>
			</ul>
		`,
	mounted: function() {
		var that = this;
		axios.get(
			"/products/hot"
		).then(function(res) {
			that.goods = res.data.data.data.records;
		});
	}
}

// 3.6 积分
var Jifen = {
	data: function() {
		return {

		}
	},
	template: `
			<div class = "jifen">
						<div class = "jingpin">
							<div class = "jifen-title tx">
								<div class = "jifen-text">
									<img src = './img/jifen.png'>
									<h2>积分攻略</h2>
								</div>
								<div class = "jifen-more" style="display: none;">
									<span>更多</span>
									<img src = './img/more.png'>
								</div>
							</div>
						</div>
						
						<ul class = "jifen-ul tx">
							<li>
								<h4>签到得鸡腿</h4>
								<div class = "btn">去签到</div>
							</li>
							<li>
								<h4>购课得鸡腿</h4>
								<div class = "btn">去签到</div>
							</li>
							<li>
								<h4>推荐得鸡腿</h4>
								<div class = "btn">去签到</div>
							</li>
							<li>
								<h4>做任务得鸡腿</h4>
								<div class = "btn">去签到</div>
							</li>
						</ul>
					</div>
		`
}

// 3. 主页页面
var ShowIndex = {
	data: function() {
		return {

		}
	},
	components: {
		"banner": Banner,
		"jingpin": Jingpin,
		"jp-products": Products,
		"hot": Hot,
		"hot-products": hotProducts,
		"jifen": Jifen
	},
	template: `
		<div class = "home bx" >
			<banner></banner>
			<jingpin></jingpin>
			<jp-products></jp-products>
			<hot></hot>
			<img src = './img/ad.png' class = "ad mg">
			<hot-products></hot-products>
			<jifen></jifen>
		</div>
	`
}

// 4. 全部商品页面
var ShowGoods = {
	data: function() {
		return {
			goods: [],
			url: "http://sc.wolfcode.cn",
			//1表示热销，0代表否
			isHotSale: 0,
			//1表示新品，0代表否
			isLatest: 0,
			isTruth01:'',
			isTruth02:'all',
			goods:[],
			minPrice:0,
			maxPrice:2000,
			flushgoods:[],
			showgoods:[],
			nullgoods:[],
			pricegoods:[],
			num:0
			
		}
	},
	template: `
		<div class = "coding-goods bx"> 
					<ul class = "bread">
						<li>
							<span>首页</span>
							<i>/</i>
						</li>
						<li>
							<span>全部商品</span>
							<i>/</i>
						</li>
					</ul>
					
					<img src = "./img/ad.png">
					
					<section class = "list">
						<div class = "list-t">
							<strong>排序：</strong>
							<span class = "active_2" @click="priceall()">全部</span>
							<span class @click="">我能兑换的</span>
							<span class @click="lowest()">0-5000分</span>
							<span class @click="lower()">5000-10000分</span>
							<span class @click="higher()">10000-15000分</span>
							<span class @click="highest()">15000-20000分</span>
							<span class @click="maxhighest()">大于20000分</span>
						</div>
						<div class = "list-b">
							<strong>分类：</strong>
							<span class = "active_3" @click="liveall()">全部</span>
							<span class @click="truth()">实物商品</span>
							<span class @click="falth()">虚拟商品</span>
						</div>
					</section>
					
					<div>
						<ul class = "products bx">
							<li v-for="item in showgoods" :key="item.id">
								<router-link :to = "{name:'productsId'}">
									<div class = "products-box">
										<img :src="url + item.coverImg" class = "">
										<h3>
											{{item.name}}
										</h3>
										<section>
											<span>{{item.coin}}</span>
											<img src = './img/products02.png' class = "">
										</section>
										<div class = "btn">
											立即兑换
										</div>
										<img src = './img/new.png' class = "img-p" style = "display : none;">
										<img src = './img/hot.png' class = "img-p">
								</router-link>
							</li>
						</ul>
						<p style = "text-align: center;line-height: 2;">
							<i class = "iconfont icon-loading">
								已经到底了QAQ ~
							</i>
						</p>
						
					</div>
					
				</div>
	`,
	mounted: function() {
		var that = this;
		axios.get(
			"/products/hot"
		).then(function(res) {
			that.goods = res.data.data.data.records;
			that.showgoods = that.goods;
		});
		
		let list_t = document.querySelectorAll('.list .list-t span');
		for (let i = 0; i < list_t.length; i++) {
				
			list_t[i].addEventListener('click', function() {
				document.querySelector('.active_2').classList.remove('active_2');
				this.classList.add('active_2');
			})
		};
		
		let list_b = document.querySelectorAll('.list .list-b  span');
		for (let j = 0; j < list_b.length; j++) {
				
			list_b[j].addEventListener('click', function() {
				document.querySelector('.active_3').classList.remove('active_3');
				this.classList.add('active_3');
			})
		}
		
		
	},
	watch:{
		isTruth01:function(val){
			if(val == 'all')
			{
				this.minPrice = 0;
				this.maxPrice = 99999;
			}
		},
		isTruth02:function(val){
			var goo = [];
			if(this.num==0){
				goo = this.goods;
				console.log(goo)
			}else{
				goo = this.pricegoods;
			}
			if(val == 'all')
			{
				for (var i=0;i<goo.length;i++){
					if(goo[i].columnId==1||goo[i].columnId==2){
						this.nullgoods.push(goo[i])
					}
				}
				this.changeShowgoods();
			}else if(val == 'tru'){
				for (var i=0;i<goo.length;i++){
					if(goo[i].columnId==2){
						this.nullgoods.push(goo[i])
					}
				}
				this.changeShowgoods();
			}else if(val == 'fal'){
				for (var i=0;i<goo.length;i++){
					if(goo[i].columnId==1){
						this.nullgoods.push(goo[i])
					}
				}
				this.changeShowgoods();
			}
		},
		minPrice:function(val){
			for (var i=0;i<this.goods.length;i++){
				if(this.goods[i].coin<val){
					this.flushgoods.push(this.goods[i])
				}
			}
		},
		maxPrice:function(val){
			for (var i=0;i<this.goods.length;i++){
				if(this.goods[i].coin>val){
					this.flushgoods.push(this.goods[i])
				}
			}
			this.deletegoods();
			this.changeShowgoods();
		},
		
		
	},
	methods:{
		deletegoods:function(){
			this.num++;
			for (var i=0;i<this.goods.length;i++){
				var  count=0;
				for(var j=0;j<this.flushgoods.length;j++)
				{
					if(this.goods[i].id==this.flushgoods[j].id)
					{
						count++;
					}
				}
				if(count==0){
					this.nullgoods.push(this.goods[i])
				}
				count=0;
			}
			this.pricegoods = this.nullgoods;
		},
		changeShowgoods:function(){
			this.nullgoods = [];
			if(this.isTruth02 == 'all')
			{
				for (var i=0;i<this.pricegoods.length;i++){
					if(this.goods[i].columnId==1||this.goods[i].columnId==2){
						this.nullgoods.push(this.pricegoods[i])
					}
				}
			}else if(this.isTruth02 == 'tru'){
				for (var i=0;i<this.pricegoods.length;i++){
					if(this.goods[i].columnId==2){
						this.nullgoods.push(this.pricegoods[i])
					}
				}
			}else if(this.isTruth02 == 'fal'){
				for (var i=0;i<this.pricegoods.length;i++){
					if(this.goods[i].columnId==1){
						this.nullgoods.push(this.pricegoods[i])
					}
				}
			}
			this.showgoods = this.nullgoods;
			this.nullgoods = [];
			this.flushgoods = [];
		},
		priceall:function(){
			this.isTruth01 = 'all';
		},
		liveall:function(){
			this.isTruth02 = 'all';
		},
		truth:function(){
			this.isTruth02 = 'tru';
		},
		falth:function(){
			this.isTruth02 = 'fal';
		},
		// exc:function(){
			
		// },
		lowest:function(){
			this.minPrice = 0;
			this.maxPrice = 5000;
			this.isTruth01 = 'none';
		},
		lower:function(){
			this.minPrice = 5001;
			this.maxPrice = 10000;
			this.isTruth01 = 'none';
		},
		higher:function(){
			this.minPrice = 10001;
			this.maxPrice = 15000;
			this.isTruth01 = 'none';
		},
		highest:function(){
			this.minPrice = 15001;
			this.maxPrice = 20000;
			this.isTruth01 = 'none';
		},
		maxhighest:function(){
			this.minPrice = 20001;
			this.maxPrice = 99999;
			this.isTruth01 = 'none';
		},
	},
}


// 5.商品详情
var ShowGoodsMsg = {
	data: function() {
		return {
			goods: [],
			url: "http://sc.wolfcode.cn",
			id: "",
		}
	},
	template: `
		<div>
			我是商品详情
		</div>
	`,
	mounted: function() {
		var that = this;
		axios.get(
			"/products/{id}"
		).then(res => {
			that.goods = res.data.data;
			console.log(that.goods);
		})
	}
}


// 6. 尾部
var codingFoot = {
	data: function() {
		return {

		}
	},
	components: {

	},
	template: `
			<div class = "coding-foot">
				<div class = "foot-in tx">
					<div class= "foot-in-l">
						<img src = './img/slogan.png'>
						<p>
							叩丁狼是一家专注于培养高级IT技术人才，为学员提供定制化IT职业规划方案及意见咨询服务的教育科技公司，为您提供海量优质课程，以及创新的线上线下学习体验，帮助您获得全新的个人发展和能力提升。 
						</p>
					</div>
					<ul class= "foot-in-c">
						<li>
							<a herf>微信公众号</a>
							<img src = "./img/wx.png" class = "wx" style="display: none;">
						</li>
						<li>
							<a herf>新浪微博</a>
						</li>
						<li>
							<a herf>在线客服</a>
							<img src = "./img/wx.png" class = "service" style="display: none;">
						</li>
					</ul>
					<div class= "foot-in-r">
						<p>全国免费咨询热线</p>
						<h2>020-85628002</h2>
					</div>
				</div>
			</div>
		`
}

// 404 错误
var codingErro = {
	data: function() {
		return {

		}
	},
	template: `
		<div class = "erro-404 bx">
			<img src = "./img/404.jpg"></img>
		</div>
	`
}


var contenerTitle = {
	data: function() {
		return {

		}
	},
	template: `
		<div class = "contener-box">
			<coding-head></coding-head>
			<coding-title></coding-title>
		</div>
	`,
	components: {
		// 头部组件
		'coding-head': codingHead,
		'coding-title': codingTitle
	}

};
Vue.component('contener-title', contenerTitle);

var contenterIndex = {
	data: function() {
		return {

		}
	},
	template: `
		<div class = "contenter-index">
			<show-index></show-index>
		</div>
	`,
	components: {
		'show-index': ShowIndex,
	}

};
Vue.component("contenter-index", contenterIndex);

var contenterGoods = {
	data: function() {
		return {

		}
	},
	template: `
		<div class = "show-goods">
			<show-goods></show-goods>
		</div>
	`,
	components: {
		'show-goods': ShowGoods,
	}

};
Vue.component("contenter-goods", contenterGoods);

var contenterPerson = {
	data: function() {
		return {

		}
	},
	template: `
		<div>我是个人中心</div>
	`
}
Vue.component("contenter-person", contenterPerson)

var contenterOrder = {
	data: function() {
		return {

		}
	},
	components: {
		"coding-erro": codingErro
	},
	template: `
		<div class = "contenter-order"> 
			<coding-erro></coding-erro>
		</div>
	`
}
Vue.component("contenter-order", contenterOrder)

var contenterWelfare = {
	data: function() {
		return {

		}
	},
	components: {
		"coding-erro": codingErro
	},
	template: `
		<div class = "contenter-welfare"> 
			<coding-erro></coding-erro>
		</div>
	`
}
Vue.component("contenter-welfare", contenterWelfare)

var codingFoot = {
	data: function() {
		return {

		}
	},
	template: `
		<div class = "coding-foot">
			<coding-foot></coding-foot>
		</div>
	`,
	components: {
		'coding-foot': codingFoot,
	}
};
Vue.component("contenter-foot", codingFoot);

//定义路由对象的规则
var vueRouter = new VueRouter({
	routes: [
		//	配置默认路由，即打开网页展示的内容
		{
			path: "/",
			redirect: "/index"
		},
		{
			path: "/index",
			component: contenterIndex,
			name: 'Index'
		},
		{
			path: "/goods",
			component: contenterGoods,
			name: 'Goods'
		},
		{
			path: "/person",
			component: contenterPerson,
			name: 'Person'
		},
		{
			path: "/order",
			component: contenterOrder,
			name: 'Order'
		},
		{
			path: "/welfare",
			component: contenterWelfare,
			name: 'Welfare'
		},
		{
			path: "/products/{{1}}",
			component: ShowGoodsMsg,
			name: 'productsId'
		}
	]
});

//路由守卫
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
	return originalPush.call(this, location).catch(err => err)
}


var vm = new Vue({
	el: "#app",
	data: {

	},
	router: vueRouter
	// ,
	// created(){
	// 	if(this.$router.path === '/index'){

	// 	}else if (this.$router.path !== '/index'){
	// 		this.$router.replace('/index');
	// 	}
	// }
});
